<div class="mat-sort-header-container"
     [class.mat-sort-header-sorted]="_isSorted()"
     [class.mat-sort-header-position-before]="arrowPosition == 'before'">
  <button class="mat-sort-header-button" type="button"
          [attr.disabled]="_isDisabled() || null"
          [attr.aria-label]="_intl.sortButtonLabel(id)"
          (focus)="_setIndicatorHintVisible(true)"
          (blur)="_setIndicatorHintVisible(false)">
    <ng-content></ng-content>
  </button>

  <!-- Disable animations while a current animation is running -->
  <div class="mat-sort-header-arrow"
       *ngIf="_renderArrow()"
       [@arrowOpacity]="_getArrowViewState()"
       [@arrowPosition]="_getArrowViewState()"
       [@allowChildren]="_getArrowDirectionState()"
       (@arrowPosition.start)="_disableViewStateAnimation = true"
       (@arrowPosition.done)="_disableViewStateAnimation = false">
    <div class="mat-sort-header-stem"></div>
    <div class="mat-sort-header-indicator" [@indicator]="_getArrowDirectionState()">
      <div class="mat-sort-header-pointer-left" [@leftPointer]="_getArrowDirectionState()"></div>
      <div class="mat-sort-header-pointer-right" [@rightPointer]="_getArrowDirectionState()"></div>
      <div class="mat-sort-header-pointer-middle"></div>
    </div>
  </div>
</div>
